<#setting classic_compatible=true>
<#assign base=request.contextPath />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" href="../images/favicon.ico" type="image/ico" />
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/bootstrap-table.min.css">
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/bootstrap-datetimepicker.min.css">
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/model.css" > 
    <title>消息流量统计</title>
    <!-- 引入通用css和js -->
	<#include "/common/commoncss.ftl">
	<link rel="stylesheet" type="text/css" href="${base}/zhgl-jzstyxx-manage/css/statictics/messageFlow.css">
  </head>
  <body class="nav-md">
        	<!-- 标题栏区域 -->
			<div class="titleColumn">
				<span class="fa fa-bar-chart-o"></span><span style="margin-left:20px;">统计分析</span>&nbsp;&nbsp;<span class="fa fa-angle-right"></span>&nbsp;&nbsp;<span>消息流量统计</span>
			</div>
			<!-- 图表区域 -->
			<div class="tableColumn" >
				<!-- 查询框区域 -->
				<div class="lockColumn">
						<div class="kong"></div>
						<div class="lookdel">
							<span id="searchtime">查询时间</span>
							<select id="sel" class="inputbox">
							</select> 
							<button id="searchTable" style="color:#fff;background: #00796A;"><span class="fa fa-search"></span>&nbsp;查询</button>
						</div>
				</div>
				<!-- 查询框区域结束 -->
				<!-- 图表区域开始 -->
				<div class="charts">
					<div class="chart-f" id="chart-f">
					
					</div>
					<div class="chart-s" id="chart-s">
					
					</div>
				</div>
				<!-- 图表区域结束 -->
		</div>
	<#include "/common/commonjs.ftl">
	<script src="${base}/zhgl-jzstyxx-manage/vendors/moment.min.js"></script>
<!-- 	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/zhgl-jzstyxx-manage/js/bootstrap-datetimepicker.js"></script>
	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/bootstrap-datetimepicker.zh-CN.js"></script> -->
	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/echarts.js"></script>
	<script type="text/javascript">
		var myDate=new Date();
		var year=myDate.getFullYear();
		var month=myDate.getMonth()+1;
		var day=myDate.getDate();
		var time=year+"年"+month+"月"+day+"日 ";
		var topicLi=[];
		var messageLi=[];
		var nums=[];
		var hours=["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00","24:00"];
	</script>
	<!-- 这是第一个echars表格 --> 
	<script type="text/javascript">
	function giveNums(nums,hours){
		var myChartm1 = echarts.init(document.getElementById('chart-f'));
		//自定义表格配置项
		var optionm1 = {
			//表格背景颜色
			backgroundColor:'#67479A',
			//表格标题
			title : {
				text : time+'各时间段消息流量',
				/* subtext : time, */
				textStyle:{
					fontSize:14,
					color:'#fff',
				},
				x:55,
				y:10,
			},
			//提示框，鼠标悬浮交互时的信息提示
			tooltip : {
				trigger : 'axis',
				formatter:function(a){
		    		return a[0].name+"<br/>"
		    		+a[0].seriesName+":"+a[0].value+"条<br/>"
		    	}
			},
			toolbox:{
				show:true,
				backgroundColor:'rgba(255,255,255,0.8)',
				color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
				feature:{
					mark:{show:true},//辅助线开关
					dataView:{show:true,readOnly:false},//数据视图
					magicType:{//图表间切换
						show:true,
						type:['line','bar'],
					},
					restore:{show:true,title:'还原',color:'black'},//还原
					saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
				}
			},
			//是否启用拖拽重计算特性
			calculable : true,
			//X轴设计
			xAxis : [ {
				type : 'category',
				name:'时间',
				boundaryGap : false,
				axisLabel:{
					show:true,
					textStyle:{
						color:'#fff',
					},
					interval:0,
					rotate:30
				},
				offset:-2,
				axisLine:{
					lineStyle:{
						color:'#fff',
					},
				},
				axisTink:{
					show:false,
				},
				splitLine:{
					show:false,
				},
				data : hours
			} ],
			//Y轴设计
			yAxis : [ {
				type : 'value',
				name:'单位: 条',
				axisLabel:{
					formatter:'{value}',
					textStyle:{
						color:'#fff',
					},
				},
				axisLine:{
					lineStyle:{
						color:'#fff',
					},
				},
				axisTink:{
					show:false,
				},
				splitLine:{
					show:false,
				},
			} ],
			series : [ {
				name : '消息流量',
				type : 'line',
				smooth : true,//曲线连接
				lineStyle:{
					normal:{
						color:"#67479A",
						width:2,
					},
				},
	            //图表区域样式
	            areaStyle: {normal: {
	                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                        offset: 0,
	                        color: '#A998C5'
	                    }, {
	                        offset: 1,
	                        color: 'rgba(0,0,0,0)'
	                    }]),
	            }},
				data : nums
			} ]
		};
		//使用指定上午配置型和数据显示图表
		myChartm1.setOption(optionm1);
	}	
		
	$.ajax({
			"url":"/zhgl-jzstyxx-manage/index/getTodayMessage",
			"type":"post",
			"dataType":"JSON",
			"success":function(obj){
				for(var i=0;i<=9;i++){
					var t0i;
					 t0i=obj['0'+i];
					 nums.push(t0i);
				}
				for(var i=10;i<=24;i++){
					var ti;
					 ti=obj[i];
					 nums.push(ti);
				}
				//把ajax拿到的y坐标的值赋值给data
				giveNums(nums,hours);
			}
	});
</script>
	
<!-- 第二个表格 -->
<script type="text/javascript">
		function giveNumsByTopic(topicLi,messageLi){
		//初始化echars实例
		var myChartm2 = echarts.init(document.getElementById('chart-s'));
		//自定义表格配置项
		var optionm2 = {
			//表格背景颜色
			backgroundColor:'#5A7BEF',
			//表格标题
			title : {
				text : time+'各主题队列消息流量',
				/* subtext : time, */
				textStyle:{
					fontSize:14,
					color:'#fff',
				},
				x:55,
				y:10,
			},
			toolbox:{
				show:true,
				color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
				backgroundColor:'rgba(255,255,255,0.8)',
				feature:{
					mark:{show:true},//辅助线开关
					dataView:{show:true,readOnly:false},//数据视图
					magicType:{//图表间切换
						show:true,
						type:['line','bar'],
					},
					restore:{show:true,title:'还原',color:'black'},//还原
					saveAsImage:{show:true,title:'保存为图片',type:'png',lang:['点击保存']},//是否保存
				}
			},
			//提示框，鼠标悬浮交互时的信息提示
			tooltip : {
				trigger : 'axis',
				formatter:function(a){
		    		return a[0].name+"<br/>"
		    		+a[0].seriesName+":"+a[0].value+"条<br/>"
		    	}
			},
			//是否启用拖拽重计算特性
			calculable : true,
			//X轴设计
			xAxis : [ {
				type : 'category',
				name:'主题队列名',
			/* 	boundaryGap : false, */
				axisLabel:{
					show:true,
					textStyle:{
						color:'#fff',
					},
					interval:0,
					rotate:30
				},
				axisLine:{
					lineStyle:{
						color:'#fff',
					},
				},
				axisTink:{
					show:false,
				},
				splitLine:{
					show:false,
				},
				data : topicLi
			} ],
			//Y轴设计
			yAxis : [ {
				type : 'value',
				name:'单位: 条',
				axisLabel:{
					formatter:'{value}',
					textStyle:{
						color:'#fff',
					},
				},
				axisLine:{
					lineStyle:{
						color:'#fff',
					},
				},
				axisTink:{
					show:false,
				},
				splitLine:{
					show:false,
				},
			} ],
			series : [ {
				name : '消息流量',
				type : 'bar',
				smooth : true,//曲线连接
				lineStyle:{
					normal:{
						color:"#A0C5EA",
						width:2,
					},
				},
	            //图表区域样式
	            areaStyle: {normal: {
	                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                        offset: 0,
	                        color: '#A998C5'
	                    }, {
	                        offset: 1,
	                        color: 'rgba(0,0,0,0)'
	                    }]),
	            }},
				data : messageLi
			} ]
		};
		//使用指定上午配置型和数据显示图表
		myChartm2.setOption(optionm2);
		}
		
		$.ajax({
			"url":"/zhgl-jzstyxx-manage/index/getTodayMessageByTopic",
			"type":"post",
			"dataType":"JSON",
			"success":function(obj){
				for(var i=0;i<obj[0].length;i++){
					topicLi.push(obj[0][i]);
					messageLi.push(obj[1][i]);
				}
				giveNumsByTopic(topicLi,messageLi);
			}
		});
	</script>
	<script type="text/javascript" src="${base}/zhgl-jzstyxx-manage/js/statictics/messageFlow.js"></script>
  </body>
</html>
